<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书网络监控插件</title>
    <link rel="stylesheet" href="shared/common.css">
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>小红书网络监控</h1>
            <p class="subtitle">网络请求监控插件</p>
        </div>

        <!-- API状态和SSO登录 -->
        <div class="status-card">
            <div class="api-status">
                <div class="status-indicator" id="apiStatusIndicator"></div>
                <div class="status-text" id="apiStatusText">未配置API服务</div>
            </div>
            
            <!-- SSO登录容器 -->
            <div class="sso-container" id="ssoContainer">
                <button class="btn btn-primary" id="ssoStartLogin">
                    单点登录
                </button>
                <button class="btn btn-success hidden" id="ssoCheckLogin">
                    已完成登录，点击继续
                </button>
                <!-- 退出登录容器 -->
                <div class="logout-container" id="logoutContainer">
                    <button class="btn btn-danger" id="logoutBtn">
                        退出登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 抓取规则 -->
        <div class="status-card">
            <div class="rules-header">
                <div class="rules-info" id="captureRulesInfo">正在加载抓取规则...</div>
                <button class="btn btn-outline btn-small" id="refreshRulesBtn">
                    刷新规则
                </button>
            </div>
            <div class="rules-list" id="rulesList">
                <!-- 规则列表将动态填充 -->
            </div>
        </div>

        <!-- 配置页面入口 -->
        <div class="status-card">
            <button class="btn btn-primary" id="configPageBtn">
                进入配置页面
            </button>
        </div>

        <!-- 配置警告 -->
        <div class="warning-message" id="configWarning" style="display: none;">
            监控功能已禁用或未配置URL规则，请检查配置设置
        </div>
    </div>

    <script src="popup/index.js" type="module"></script>
</body>
</html> 